/* eslint-disable react/jsx-no-target-blank */
/* eslint-disable react/jsx-key */
import React, { Component, useState, useEffect } from 'react';
import styles from './index.less';
import {
  Row,
  Col,
  Card,
  Button,
  Progress,
  Select,
  DatePicker,
  message,
  Tooltip,
  Image,
  Modal,
} from 'antd';
import { LoadingOutlined } from '@ant-design/icons'
import AutoTable from '@/components/AutoTable/mtable';
import InitForm from '@/components/InitForm';
import { getFetch, doFetch } from '@/utils/doFetch';
import { user } from '@/services/api';
import Jzdata from './jzdata';
import Rfidata from './rfidata';
import Figdata from './figdata';
import Aidata from './aidata';
import Charts from './charts';
import Donedata from './donedata';
import moment from 'moment';
import bodyParse from '@/utils/bodyParse';
import { useMemo } from 'react';
import { useRequest, useInterval } from 'ahooks';
import MapGD from './map';


let col = { xs: 24, sm: 24, md: 6, lg: 5, xl: 6, xxl: 5 },
  cols = { xs: 24, sm: 24, md: 12, lg: 14, xl: 12, xxl: 14 },
  statusname = {
    stalled: '待处理',
    pending: '处理中',
    completed: '已完成',
  };
//定位组件props
const pluginProps = {
  enableHighAccuracy: true,
  timeout: 10000,
  showButton: true,
};

export default () => {
  const [cur, setcur] = useState({}),
    [vs, cvs] = useState(false),
    [iftype, ciftype] = useState({
      title: '',
      columns: [],
      path: '/vehicle-api/monitor/rfid_list',
    }),
    [tab, settab] = useState('tab1'),
    [firstparams, cfirst] = useState({
      area_id: '',
      start_date: moment().startOf('month').format('YYYY-MM-DD'),
      end_date: moment().endOf('month').format('YYYY-MM-DD'),
    }),
    [numlist, setlist] = useState({
      rfid: 0,
      finger: 0,
      lift: 0,
      jztotal: 0,
    }),
    [area, setarea] = useState({}),
    [center, setcenter] = useState({ longitude: 114.05142, latitude: 22.558566 });

  let { run, loading } = useRequest(doFetch, {
    debounceWait: 300, //防抖
    manual: true,
    formatResult: (res) => res,
    onSuccess: (result, params) => {
      if (result.code == 0) {
        message.success('操作成功！');
        cvs(false);
        ciftype({
          ...iftype,
          val: '',
        });
      }
    },
  });

  let huiz = useRequest(
    () => {
      return getFetch({ url: '/vehicle-api/monitor/device_summary', params: {} });
    },
    {
      debounceWait: 300,
      pollingInterval: 60000,
    },
  );
  let charge = useRequest(
    () => {
      return getFetch({ url: '/vehicle-api/monitor/charge_count', params: {} });
    },
    {
      debounceWait: 300,
      pollingInterval: 60000,
    },
  );

  useEffect(() => {
    getFetch({ url: '/vehicle-api/area', params: { is_all: 1 } }).then((res) => {
      setarea(res);
      cfirst({
        ...firstparams,
        area_id: res?.data?.list[0].id,
      });
    });
  }, []);

  let percent = useMemo(() => {
    if (cur?.level == 1) {
      return 8;
    } else if (cur?.level == 2) {
      return 20;
    } else if (cur?.level == 3) {
      return 40;
    } else if (cur?.level == 4) {
      return 80;
    }
  }, [cur]);

  useEffect(() => {
    if (!firstparams.area_id) {
      return;
    }
    getFetch({
      url: '/vehicle-api/monitor/risk_assess/' + bodyParse({ ...firstparams }),
      params: { ...firstparams },
    }).then((res) => {
      setcur(res?.data);
    });
  }, [firstparams]);

  return (
    <div className={styles.contain}>
      <Modal
        visible={vs}
        title={iftype?.title}
        onCancel={() => {
          cvs(false);
        }}
        destroyOnClose={true}
        footer={false}
        width={iftype.val && iftype.val.indexOf('submit') != -1 ? 400 : 1000}
      >
        {iftype.val && iftype.val.indexOf('submit') != -1 ? (
          <InitForm
            fields={{
              user_ids: {
                value: [],
                type: 'select',
                title: '处置员',
                name: ['user_ids'],
                required: true,
                options: {
                  database: user,
                  params: {
                    is_all: 1,
                  },
                },
                formart: ['id', 'real_name'],
                multiple: true,
                col: { span: 24 },
              },
            }}
            submitData={(values) => {
              if (iftype.val == "submits") {
                run({
                  url: '/vehicle-api/monitor/charge_remind', params: {
                    ...values,
                    error_message: iftype.row.error_message,
                    portIndex: iftype.row.portIndex,
                    alarm_time: iftype.row.newTime ? moment(iftype.row.newTime).format("YYYY-MM-DD HH:mm:ss") : "",
                    id: iftype.id
                  }
                });
              } else {
                run({ url: '/vehicle-api/monitor/remind', params: { ...values, id: iftype.id } });
              }

            }}
            onChange={(changedValues) => {
              //联动操作
            }}
            submitting={loading}
          />
        ) : (
          <AutoTable onlyTable={true} columns={iftype?.columns} path={iftype?.path} extraparams={{ is_all: 1 }} />
        )}
      </Modal>

      <Row gutter={12} style={{ width: '100%', height: '100%' }}>
        <Col {...col} className="columns">
          <div className="columns" style={{ flex: 1, marginBottom: 12, overflow: 'hidden' }}>
            <Card
              className="diys"
              style={{ flex: 1, padding: 12 }}
              title={'电动自行车安全风险评估'}
            >
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  flexDirection: 'column',
                }}
              >
                <div className="row">
                  <Select
                    style={{ flex: 1 }}
                    defaultValue={'1'}
                    options={[
                      {
                        label: '深圳市',
                        value: '1',
                      },
                    ]}
                  />
                  <Select
                    style={{ flex: 1, margin: '0 2px' }}
                    defaultValue={'1'}
                    options={[
                      {
                        label: '福田区',
                        value: '1',
                      },
                    ]}
                  />

                  <Select
                    style={{ flex: 1 }}
                    value={firstparams?.area_id}
                    options={
                      area?.data?.list
                        ? area?.data?.list.map((it) => {
                          return {
                            label: it.name,
                            value: it.id,
                          };
                        })
                        : []
                    }
                    onChange={(val) => {
                      cfirst({
                        ...firstparams,
                        area_id: val,
                      });
                    }}
                    placeholder="请选择区域"
                  />
                </div>

                <DatePicker
                  style={{ width: '100%', marginTop: 6 }}
                  defaultValue={moment()}
                  onChange={(val) => {
                    cfirst({
                      ...firstparams,
                      start_date: moment(val).startOf('month').format('YYYY-MM-DD'),
                      end_date: moment(val).endOf('month').format('YYYY-MM-DD'),
                    });
                  }}
                  picker="month"
                />
              </div>

              <div style={{ marginTop: 50 }}>
                <div className={styles.ledgen}>
                  <span>差</span>
                  <span>中</span>
                  <span>良</span>
                  <span>优</span>
                  <div className={styles.active} style={{ left: percent + '%' }}>
                    {percent < 10 ? '差' : percent < 30 ? '中' : percent < 50 ? '良' : '优'}
                  </div>
                </div>
                <Progress
                  strokeColor={{
                    '0%': '#0c7de2',
                    '100%': '#24b1f3',
                  }}
                  percent={percent}
                  status="active"
                  showInfo={false}
                  strokeWidth={14}
                  style={{ borderRadius: 2 }}
                />
              </div>
              <div
                style={{ whiteSpace: 'pre-wrap', color: '#f0f0f0', paddingTop: 12, fontSize: 14 }}
              >
                辖区面积:{cur?.area ?? 0}万平方米
                <br />
                辖区集中充电数量:{cur?.charge_num ?? 0}个
                <br />
                辖区电动自行车数量:{cur?.vehicle_num ?? 0}个
                <br />
                指挥中心电话(消防室电话):{cur?.tel ?? '-'}
                <br />
              </div>
            </Card>
            <Card
              className="diys"
              style={{ flex: 1, padding: 12, marginBottom: 0, overflow: 'hidden' }}
              title={
                <div
                  style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
                >
                  <span className="center">
                    集中充电场所消防报警
                    <img
                      src={require('@/assets/warn.png')}
                      alt=""
                      style={{ width: 18, marginLeft: 12 }}
                    />
                  </span>
                  <span>共{numlist?.jztotal ?? 0}个报警</span>
                </div>
              }
            >
              <Jzdata
                settotal={(val) => {
                  setlist((numlist) => {
                    return {
                      ...numlist,
                      ...val,
                    };
                  });
                }}
              />
            </Card>
          </div>

          <Card
            className="diys"
            style={{ height: 180, padding: 12, overflow: 'hidden' }}
            title="充电桩(柜)充电状态"
          >
            <div className="center" style={{ justifyContent: 'space-around', height: '90%' }}>
              <div className="center" style={{ flexDirection: 'column' }}>
                <img style={{ width: 40 }} src={require('@/assets/status1.png')} alt="" />
                <p style={{ color: '#cccccc', marginTop: 6, marginBottom: 0, textAlign: 'center' }}>
                  <span>
                    <b style={{ fontSize: 18, color: '#2183de' }}>
                      {charge?.data?.data?.free_num ?? 0}
                    </b>
                    个
                  </span>
                  <br />
                  <span>待使用</span>
                </p>
              </div>
              <div className="center" style={{ flexDirection: 'column' }}>
                <img style={{ width: 40 }} src={require('@/assets/status2.png')} alt="" />
                <p style={{ color: '#cccccc', marginTop: 6, marginBottom: 0, textAlign: 'center' }}>
                  <span>
                    <b style={{ fontSize: 18, color: '#0a905c' }}>
                      {charge?.data?.data?.charging_num ?? 0}
                    </b>
                    个
                  </span>
                  <br />
                  <span>充电中</span>
                </p>
              </div>
              <div
                className="center"
                style={{
                  flexDirection: 'column',
                  cursor: 'pointer',
                }}
                onClick={() => {
                  getFetch({ url: '/vehicle-api/monitor/charge_error_list', params: {} }).then(
                    (res) => {
                      Modal.info({
                        title: '异常设备列表',
                        destroyOnClose: true,
                        width: 1000,
                        okText: '知道了',
                        content: (
                          <div>
                            <AutoTable
                              dataSource={res?.data}
                              columns={[
                                {
                                  title: '设备号',
                                  dataIndex: 'code',
                                  key: 'code',
                                  search: false,
                                },
                                {
                                  title: '最近联网时间',
                                  dataIndex: 'newTime',
                                  key: 'newTime',
                                  search: false,
                                  width: 200
                                },
                                {
                                  title: '异常端口号',
                                  dataIndex: 'portIndex',
                                  key: 'portIndex',
                                  search: false,
                                },
                                {
                                  title: '设备端口数',
                                  dataIndex: 'number',
                                  key: 'number',
                                  search: false,
                                },
                                {
                                  title: '充电异常信息',
                                  dataIndex: 'error_message',
                                  key: 'error_message',
                                  search: false,
                                  width: 220,
                                },
                                {
                                  title: '操作',
                                  dataIndex: 'action',
                                  key: 'action',
                                  search: false,
                                  render: (text, record) => {
                                    return <a
                                      onClick={() => {
                                        cvs(true)
                                        ciftype((iftype) => ({
                                          ...iftype,
                                          title: '选择处置员，发送提醒',
                                          val: 'submits',
                                          id: record.id,
                                          row: record
                                        }));
                                      }}
                                    >
                                      处理
                                    </a>
                                  }
                                },
                              ]}
                            />
                          </div>
                        ),
                      });
                    },
                  );
                }}
              >
                <img style={{ width: 40 }} src={require('@/assets/status3.png')} alt="" />
                <p style={{ color: '#cccccc', marginTop: 6, marginBottom: 0, textAlign: 'center' }}>
                  <span>
                    <b style={{ fontSize: 18, color: '#f03c24' }}>
                      {charge?.data?.data?.error_num ?? 0}
                    </b>
                    个
                  </span>
                  <br />
                  <span className="ani">异常</span>
                </p>
              </div>
            </div>
          </Card>
        </Col>
        <Col {...cols} className="columns">
          <Card className="diys" style={{ flex: 2 }}>
            <MapGD centercur={center} />
          </Card>
          <Card
            className="diys"
            style={{ flex: 1, overflow: 'hidden' }}
            tabList={[
              {
                tab: `RFID标签报警(${numlist.rfid})`,
                key: 'tab1',
              },
              {
                tab: `电器指纹检测报警(${numlist.finger})`,
                key: 'tab2',
              },
              {
                tab: `AI电梯识别报警(${numlist.lift})`,
                key: 'tab3',
              },
            ]}
            tabProps={{
              tabBarStyle: { color: '#fff' },
            }}
            onTabChange={(val) => {
              settab(val);
            }}
            tabBarExtraContent={
              <a
                style={{ marginRight: 12 }}
                onClick={() => {
                  cvs(true);
                  if (tab == 'tab1') {
                    ciftype({
                      title: 'RFID标签报警',
                      path: '/vehicle-api/monitor/rfid_list',
                      columns: [
                        {
                          title: '报警类型',
                          dataIndex: 'alarm_group_name',
                          key: 'alarm_group_name',
                          search: false,
                        },
                        {
                          title: '车主姓名',
                          dataIndex: 'alarm_name',
                          key: 'alarm_name',
                          search: false,
                        },
                        {
                          title: '车主电话',
                          dataIndex: 'alarm_phone',
                          key: 'alarm_phone',
                          search: false,
                        },
                        {
                          title: '报警位置',
                          dataIndex: 'alarm_address',
                          key: 'alarm_address',
                          search: false,
                        },
                        {
                          title: '报警时间',
                          dataIndex: 'alarm_time',
                          key: 'alarm_time',
                          search: false,
                          renderText: (text) => (
                            <span>{text ? moment(text).format('YYYY-MM-DD HH:mm') : "-"}</span>
                          ),
                        },
                        {
                          title: '状态',
                          dataIndex: 'status',
                          key: 'status',
                          search: false,
                          render: (text, record, _, action) => {
                            return <span>{statusname[record.status]}</span>;
                          },
                        },
                        {
                          title: '操作',
                          valueType: 'option',
                          width: 60,
                          render: (text, record, _, action) => [
                            <a
                              disabled={record.status != 'stalled'}
                              onClick={() => {
                                if (record.status != 'stalled') return;
                                ciftype((iftype) => ({
                                  ...iftype,
                                  title: '选择处置员，发送提醒',
                                  val: 'submit',
                                  id: record.id,
                                }));
                              }}
                            >
                              处理
                            </a>,
                          ],
                        },
                      ],
                    });
                  } else if (tab == 'tab2') {
                    ciftype({
                      title: 'AI电梯识别报警',
                      path: '/vehicle-api/monitor/finger_print_list',
                      columns: [
                        {
                          title: '报警类型',
                          dataIndex: 'alarm_group_name',
                          key: 'alarm_group_name',
                          search: false,
                        },
                        {
                          title: '用户名称',
                          dataIndex: 'alarm_name',
                          key: 'alarm_name',
                          search: false,
                        },
                        {
                          title: '报警位置',
                          dataIndex: 'alarm_address',
                          key: 'alarm_address',
                          search: false,
                        },
                        {
                          title: '报警时间',
                          dataIndex: 'alarm_time',
                          key: 'alarm_time',
                          search: false,
                          renderText: (text) => (
                            <span>{text ? moment(text).format('YYYY-MM-DD HH:mm') : "-"}</span>
                          ),
                        },
                        {
                          title: '状态',
                          dataIndex: 'status',
                          key: 'status',
                          search: false,
                          render: (text, record, _, action) => {
                            return <span>{statusname[record.status]}</span>;
                          },
                        },
                        {
                          title: '操作',
                          valueType: 'option',
                          width: 60,
                          render: (text, record, _, action) => [
                            <a
                              disabled={record.status != 'stalled'}
                              onClick={() => {
                                if (record.status != 'stalled') return;
                                ciftype((iftype) => ({
                                  ...iftype,
                                  title: '选择处置员，发送提醒',
                                  val: 'submit',
                                  id: record.id,
                                }));
                              }}
                            >
                              处理
                            </a>,
                          ],
                        },
                      ],
                    });
                  } else {
                    ciftype({
                      title: 'AI电梯识别报警',
                      path: '/vehicle-api/monitor/lift_list',
                      columns: [
                        {
                          title: '报警类型',
                          dataIndex: 'alarm_group_name',
                          key: 'alarm_group_name',
                          search: false,
                        },
                        {
                          title: '停靠楼层',
                          dataIndex: 'docking_floor',
                          key: 'docking_floor',
                          search: false,
                        },
                        {
                          title: '报警位置',
                          dataIndex: 'alarm_address',
                          key: 'alarm_address',
                          search: false,
                        },
                        {
                          title: '报警时间',
                          dataIndex: 'alarm_time',
                          key: 'alarm_time',
                          search: false,
                          renderText: (text) => (
                            <span>{text ? moment(text).format('YYYY-MM-DD HH:mm') : "-"}</span>
                          ),
                        },
                        {
                          title: '状态',
                          dataIndex: 'status',
                          key: 'status',
                          search: false,
                          render: (text, record, _, action) => {
                            return <span>{statusname[record.status]}</span>;
                          },
                        },
                        {
                          title: '操作',
                          valueType: 'option',
                          width: 60,
                          render: (text, record, _, action) => [
                            <a
                              disabled={record.status != 'stalled'}
                              onClick={() => {
                                if (record.status != 'stalled') return;
                                ciftype((iftype) => ({
                                  ...iftype,
                                  title: '选择处置员，发送提醒',
                                  val: 'submit',
                                  id: record.id,
                                }));
                              }}
                            >
                              处理
                            </a>,
                          ],
                        },
                      ],
                    });
                  }
                }}
              >
                查看全部
              </a>
            }
          >
            <div style={{ padding: '16px 12px 0px 12px', height: 'calc(100% - 12px)' }}>
              <Rfidata
                tab={tab}
                setcenter={(val) => {
                  setcenter(val);
                }}
                settotal={(val) => {
                  setlist((numlist) => {
                    return {
                      ...numlist,
                      ...val,
                    };
                  });
                }}
                handleSubmit={(id) => {
                  cvs(true);
                  ciftype((iftype) => ({
                    ...iftype,
                    title: '选择处置员，发送提醒',
                    val: 'submit',
                    id: id,
                  }));
                }}
              />

              <Figdata
                tab={tab}
                setcenter={(val) => {
                  setcenter(val);
                }}
                settotal={(val) => {
                  setlist((numlist) => {
                    return {
                      ...numlist,
                      ...val,
                    };
                  });
                }}
                handleSubmit={(id) => {
                  cvs(true);
                  ciftype((iftype) => ({
                    ...iftype,
                    title: '选择处置员，发送提醒',
                    val: 'submit',
                    id: id,
                  }));
                }}
              />

              <Aidata
                tab={tab}
                setcenter={(val) => {
                  setcenter(val);
                }}
                settotal={(val) => {
                  setlist((numlist) => {
                    return {
                      ...numlist,
                      ...val,
                    };
                  });
                }}
                handleSubmit={(id) => {
                  cvs(true);
                  ciftype((iftype) => ({
                    ...iftype,
                    title: '选择处置员，发送提醒',
                    val: 'submit',
                    id: id,
                  }));
                }}
              />
            </div>
          </Card>
        </Col>
        <Col {...col} className="columns">
          <div className="columns" style={{ flex: 2, marginBottom: 12, overflow: 'hidden' }}>
            <Card className="diys" style={{ height: 230, padding: 12 }} title="综合信息汇总">
              <div
                style={{
                  width: '100%',
                  height: '100%',
                  display: 'flex',
                  flexDirection: 'column',
                  overflow: 'hidden',
                }}
              >
                <div className="center" style={{ flex: 1, overflow: 'hidden' }}>
                  <div
                    className="column"
                    style={{
                      flex: 1,
                      height: '100%',
                      padding: 6,
                      backgroundColor: 'rgba(255,255,255,0.2)',
                    }}
                  >
                    <p style={{ color: '#fff', fontSize: 12 }}>电动自行车RFID标签管控数量</p>
                    <p
                      style={{
                        color: '#1e8dd3',
                        display: 'inline-block',
                        borderTop: '#1e8dd3 solid 1px',
                      }}
                    >
                      {
                        huiz?.loading ? <LoadingOutlined /> :
                          <b style={{ fontSize: 18 }}>{huiz?.data?.data?.rfid_num ?? 0}</b>
                      } &nbsp;个
                    </p>
                  </div>
                  <div
                    className="column"
                    style={{
                      flex: 1,
                      padding: 6,
                      height: '100%',

                      backgroundColor: 'rgba(255,255,255,0.2)',
                      margin: '0 12px',
                    }}
                  >
                    <p style={{ color: '#fff', fontSize: 12 }}>
                      电器指纹安装户数<span style={{ opacity: 0 }}>标签管控数量</span>
                    </p>
                    <p
                      style={{
                        color: '#1e8dd3',
                        display: 'inline-block',
                        borderTop: '#1e8dd3 solid 1px',
                      }}
                    >
                      {
                        huiz?.loading ? <LoadingOutlined /> :
                          <b style={{ fontSize: 18 }}>{huiz?.data?.data?.finger_print_num ?? 0}</b>
                      } &nbsp;个
                    </p>
                  </div>
                  <div
                    className="column"
                    style={{
                      flex: 1,
                      padding: 6,
                      height: '100%',
                      backgroundColor: 'rgba(255,255,255,0.2)',
                    }}
                  >
                    <p style={{ color: '#fff', fontSize: 12 }}>
                      AI电梯安装数量<span style={{ opacity: 0 }}>标签管控数量</span>
                    </p>
                    <p
                      style={{
                        color: '#1e8dd3',
                        display: 'inline-block',
                        borderTop: '#1e8dd3 solid 1px',
                      }}
                    >
                      {
                        huiz?.loading ? <LoadingOutlined /> :
                          <b style={{ fontSize: 18 }}>{huiz?.data?.data?.lift_num ?? 0}</b>
                      } &nbsp;个
                    </p>
                  </div>
                </div>
                <p style={{ color: '#fff', margin: '6px 0px 0px 0' }} className="spacebt">
                  <span>
                    今日处置报警数量
                    <b style={{ fontSize: 16, color: '#1e8dd3' }}>
                      {
                        huiz?.loading ? <LoadingOutlined /> : (huiz?.data?.data?.handle_alarm_amount ?? 0)
                      }

                    </b>
                    个
                  </span>
                  <span>
                    今日报警数量
                    <b style={{ fontSize: 16, color: '#1e8dd3' }}>
                      {huiz?.loading ? <LoadingOutlined /> : (huiz?.data?.data?.alarm_amount ?? 0)}
                    </b>
                    个
                  </span>
                </p>
                <Progress
                  strokeColor={{
                    '0%': '#108ee9',
                    '100%': '#1e8dd3',
                  }}
                  percent={
                    (huiz?.data?.data?.handle_alarm_amount ?? 0) /
                    (huiz?.data?.data?.alarm_amount ?? 1)
                  }
                  status="active"
                  showInfo={false}
                />
              </div>
            </Card>
            <Card
              className="diys"
              style={{ flex: 1, padding: 12, overflow: 'hidden', marginBottom: 0 }}
              title="报警数量分析趋势图"
            >
              <Charts />
            </Card>
          </div>
          <Card
            className="diys"
            style={{ flex: 1, padding: 12, overflow: 'hidden' }}
            title="报警处置及处罚工单"
            extra={
              <a
                style={{ marginTop: -13, display: 'block' }}
                onClick={() => {
                  cvs(true);
                  ciftype({
                    title: '处罚工单',
                    path: '/vehicle-api/monitor/handle_order',
                    columns: [
                      {
                        title: '报警时间',
                        dataIndex: 'alarm_time',
                        key: 'alarm_time',
                        search: false,
                        renderText: (text) => (
                          <span>{text ? moment(text).format('YYYY-MM-DD HH:mm') : "-"}</span>
                        ),
                      },
                      {
                        title: '报警人',
                        dataIndex: 'alarm_name',
                        key: 'alarm_name',
                        search: false,
                      },
                      {
                        title: '处罚时间',
                        dataIndex: 'handle_time',
                        key: 'handle_time',
                        search: false,
                        renderText: (text) => (
                          <span>{text ? moment(text).format('YYYY-MM-DD HH:mm') : "-"}</span>
                        ),
                      },
                      {
                        title: '处罚内容',
                        dataIndex: 'alarm_group_name',
                        key: 'alarm_group_name',
                        search: false,
                      },
                      {
                        title: '处理人',
                        dataIndex: 'handle_user_name',
                        key: 'handle_user_name',
                        search: false,
                      },

                      {
                        title: '状态',
                        dataIndex: 'status',
                        key: 'status',
                        search: false,
                        render: (text, record, _, action) => {
                          return <span>{statusname[record.status]}</span>;
                        },
                      },
                      {
                        title: '操作',
                        valueType: 'option',
                        width: 80,
                        render: (text, record, _, action) => [
                          <a
                            disabled={record.status != 'completed'}
                            onClick={() => {
                              if (record.status != 'completed') return;
                              getFetch({ url: '/vehicle-api/monitor/' + record.id }).then((res) => {
                                if (res.code == 0) {
                                  Modal.info({
                                    title: '处理信息',
                                    okText: '知道了',
                                    content: (
                                      <div>
                                        <p>
                                          <span style={{ margin: '0 0 12px 0', display: 'block' }}>
                                            备注:
                                          </span>
                                          {res?.data?.remark ?? '-'}
                                        </p>
                                        <p>
                                          <span style={{ margin: '0 0 12px 0', display: 'block' }}>
                                            处理图片:
                                          </span>
                                          <div style={{ display: 'flex' }}>
                                            {res?.data?.images
                                              ? res?.data?.images.map((it) => {
                                                return (
                                                  <div
                                                    style={{
                                                      margin: '0 12px 12px 0',
                                                      width: 68,
                                                      height: 68,
                                                    }}
                                                  >
                                                    <Image src={it.path} width={68} height={68} />
                                                  </div>
                                                );
                                              })
                                              : '-'}
                                          </div>
                                        </p>
                                      </div>
                                    ),
                                  });
                                }
                              });
                            }}
                          >
                            处理信息
                          </a>,
                        ],
                      },
                    ],
                  });
                }}
              >
                查看全部
              </a>
            }
          >
            <Donedata />
          </Card>
        </Col>
      </Row>
    </div>
  );
};
